import React,{useEffect,useState,useRef}  from "react";
import {
    View,
    StyleSheet,
    Text,
    Image,
    ScrollView,
    TouchableOpacity
}from 'react-native';
import icon_arrow from '../../../assets/icon_arrow.png';
import CategoryModal,{CategoryModalRef} from "./CategoryModal";
type Props = {
    categoryList: Category[],
    allcategoryList: Category[],
    onCategoryChange?: (category:Category)=> void;

}
export default ({categoryList,allcategoryList, onCategoryChange}:Props)=>{
      const [category, setCategory]=useState<Category>();
      useEffect(()=>{
        setCategory(categoryList.find(item=>item.name==='推荐'));
      },[categoryList]);
      const modelRef = useRef<CategoryModalRef>(null);
        return (
        <View style={styles.container}>
           <ScrollView 
           style={styles.scrollview}
           horizontal={true}
           showsHorizontalScrollIndicator={false}
           >
            {categoryList.map((item: Category, index: number)=>{
                const isSlect = item.name === category?.name;
                return (
                <TouchableOpacity style={styles.tabItem} onPress={()=>{
                    setCategory(item);
                    onCategoryChange?.(item);
                }}
                key={item.name}
                >
                    <Text style={isSlect ?styles.tabItemTxtSelect:styles.tabItemTxt}>{item.name}</Text>
                </TouchableOpacity>);

            })}


           </ScrollView>
           <TouchableOpacity
           style={styles.openButon}
           onPress={()=>{
            modelRef.current?.show();
           }}
           >
                <Image style={styles.openImg} source={icon_arrow}  />
           </TouchableOpacity>
           <CategoryModal ref={modelRef} categoryList={allcategoryList}/>
        </View>);
    

}
const styles = StyleSheet.create({
    container: {
        width: '100%',
        height: 36,
        flexDirection: 'row',
        backgroundColor: 'white',
        marginBottom: 6
    },
    scrollview:{
        flex: 1,
        height: '100%'
    },
    openButon: {
        width: 40,
        height: '100%',
        justifyContent: 'center',
        alignItems: 'center'
    },
    openImg: {
        width: 20,
        height: 20,
        transform:[{rotate: '-90deg'}]
    },
    tabItem: {
        width: 64,
        height: '100%',
        justifyContent: 'center',
        alignItems: 'center'
    },
    tabItemTxt:{
        fontSize: 16,
        color: '#999'
    },
    tabItemTxtSelect: {
        fontSize: 16,
        color: '#333',
        fontWeight: 'bold'
    }
}); 